<template>

<el-card class="moral-box-card">
  <div slot="header" class="clearfix">
    <span>德育素质申报</span>
    <span class="text item">
    <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    选择项目<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">集体评分等级分</el-dropdown-item>
    <el-dropdown-item command="b">社会责任纪实分</el-dropdown-item>
    <el-dropdown-item command="c">学业荣誉加减分</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

  </span>

  </div>
  <div>
    <div>集体评分等级分</div>
    <el-input
  type="textarea"
  :rows="10"
  placeholder="请输入内容"
  v-model="textarea">
</el-input>

  </div>
</el-card>


</template>

<script>
export default {
  methods: {
      handleCommand(command) {
        this.$message('click on item ' + command);
      }
    }
}
</script>

<style scoped>
 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .moral-box-card {
    width: 1100px;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    height:550px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-dropdown-link{
    margin-left:10px;
  }
</style>